<template>
    <h2 class="title"># {{ article?.title }}</h2>
    <div class="info">
        <span class="info_date item">
            <DateIcon class="info_icon" />
            {{ article?.createTime }}
        </span>
        <span class="info_date item">
            <BrowseIcon class="info_icon" />
            {{ article?.browse }}
        </span>
        <RouterLink :to="'/search/' + article?.categoryName + '/' + SearchEnum.category + '/' + article?.categoryid"
            class="item">
            <CategoryIcon class="info_icon" />
            {{ article?.categoryName }}
        </RouterLink>
        <RouterLink v-for="(item, i) in article?.tagList" :key="i"
            :to="'/search/' + item.name + '/' + SearchEnum.label + '/' + item.id" class="item">
            {{ item.name }}
        </RouterLink>
    </div>
    <Line />
    <div v-highlight v-html="article?.content" id="content"></div>
    <p class="copyright">本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。</p>
    <Line />
    <Comment />
</template>

<script lang="ts" setup>
import { getArticle } from '@/api/api'
import { ref, watch } from 'vue';
import Line from '@/components/home/line.vue';
import Comment from '@/components/home/comment.vue';
import SearchEnum from '@/components/home/enum/search'
import DateIcon from '@/components/icons/dateIcon.vue'
import CategoryIcon from '@/components/icons/categoryIcon.vue'
import BrowseIcon from '@/components/icons/browseIcon.vue'
import { useRoute } from 'vue-router'
import type Article from '@/components/home/type/article'
import { marked } from 'marked';

const route = useRoute();
const article = ref<Article>();

getData();

watch(route, () => {
    getData();
})

async function getData() {
    const res = await getArticle(route.params.id)
    res.data.content = marked(res.data.content);
    article.value = res.data;
}

</script>

<style lang="less" scoped>
.title {
    margin: 30px 0;
    font-size: 20px;
    color: var(--title-color);
}

.info {
    margin-top: 30px;
    display: flex;

    .item {
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: var(--info-color);

        &:last-child {
            margin-right: 0;
        }
    }

    .info_icon {
        width: 14px;
        margin-right: 5px;
        fill: var(--info-color) !important;
    }

    .info_date {
        display: flex;
    }
}

.copyright {
    margin: 30px 0;
    font-size: 10px;
    line-height: 20px;
    color: var(--info-color);
}
</style>